{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/talk_room_style.css' %}">
</head>
<body>
<div class="container-fluid">
    <div class="row title">
        <b>当前用户:</b><span id="username">{{ request.user }}</span><a href="{% url 'logout' %}">注销</a>
        <a href="{% url 'update_pwd' %}">修改用户密码</a>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3 body-content" id="main-talk-window">
            <div class="row small_hand" id="main-talk-title">
                <div class="text-center">多人聊天室</div>
            </div>
            <div class="row">
                <!--聊天框左侧-->
                <div class="col-md-9">
                    <!--聊天内容-->
                    <div class="row" id="talk-content">
                    </div>
                    <!--聊天输入框-->
                    <div class="row" id="talk-input">
                        <div class="col-md-10 text-style">
                            <textarea class="form-control" rows="3" id="input-content"></textarea>
                        </div>
                        <div class="col-md-2 text-style">
                            <button class="btn btn-success" id="send-btn">
                                发送
                            </button>
                        </div>
                    </div>
                </div>
                <!--成员列表-->
                <div class="col-md-3 " id="talk-list">
                    <!--当前的人数及人员-->
                    <div class="row" id="now_person">
                        <div><b>在线人数：</b><span id="user_number"></span></div>
                        <div id="show_user">
                        </div>
                    </div>
                    <!--和我聊天的人-->
                    <div class="row" id="talk_with_me">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 hidden" id="single-person-talk-window">
            <div class="row small_hand" id="single-person-talk-title">
                <div class="text-center">和<span id="single-person-talk-name">...</span>聊天
                    <button type="button" class="close" aria-label="Close" id="single-person-talk-close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
            </div>
            <div class="row" style="margin: 0 0;">
                <!--聊天内容-->
                <div class="row" id="single-person-talk-content">
                </div>
                <!--聊天输入框-->
                <div class="row" id="single-person-talk-input">
                    <div class="col-md-10 text-style">
                        <textarea class="form-control text-style" rows="3" id="single-person-input-content"></textarea>
                    </div>
                    <div class="col-md-2 text-style">
                        <button class="btn btn-success" id="single-person-send-btn">
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="{% static 'js/jquery-3.4.1.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
    var message_num;
    var single_message_num;
    var now_user = "{{ request.user }}";
    // 和那个单人用户聊天
    var talk_username;
    // 按标志打开单人聊天窗口
    // 当标志为True时候，不可以切换窗口
    var open_single_window_flag = false;

    // 所有用户和我聊天的数
    // 服务器发来的字典存着用户和我聊天的长度，和我这个字典的key减，当大于0表示有新消息
    var talk_with_me_num = {}

</script>
<script src="{% static 'js/talk_room_js.js' %}">
</script>
<script>

    setInterval(function () {
        if (!message_num) {
            message_num = 0
        }
        var data = {"{{ request.user }}": message_num};
        $.ajax({
            url: "{% url 'send_message' %}",
            type: "get",
            data: data,
            success: function (ret) {
                {#console.log(ret);#}
                message_num = ret.pop();
                for (var i = 0; i < ret.length; i++) {
                    if (ret[i]["user"] === now_user) {
                        show_my_message(ret[i]["message"]);
                    } else {
                        show_other_message(ret[i]);
                    }
                }
                pull_down();
            }
        });
    }, 1000);

    function get_talk_list() {
        {#console.log("666");#}
        $.ajax({
            url: "{% url 'send_user' %}",
            type: "get",
            success: function (ret) {
                $('#user_number').text(Object.keys(ret).length);
                clear_talk_list();
                for (var key in ret) {
                    if (!talk_with_me_num.hasOwnProperty(key)) {
                        talk_with_me_num[key] = 0;
                        {#console.log(talk_with_me_num);#}
                    }
                    $('#show_user').append(`<div class="user_show">${key}</div>`);
                }
            }
        })
    }

    get_talk_list();
    setInterval(get_talk_list, 5000);

    $('#send-btn').click(
        function () {
            var content = $('#input-content').val().trim();
            if (content !== "") {
                if (message_num) {
                    show_my_message(content);
                }
                pull_down();
                var data = {"{{ request.user }}": content};
                $.ajax({
                    url: "{% url 'accept_message' %}",
                    type: "post",
                    data: data,
                    headers: {"X-CSRFToken": $.cookie('csrftoken')},
                    success: function (ret) {
                        {#console.log(ret);#}
                    }
                })
            }
            // 不管消息是否发送，点击完成后清空输入框消息
            clear_my_input();
        }
    );

    // 浏览器关闭发送请求，删除user
    window.onbeforeunload = function () {
        $.ajax({
            url: "{% url 'close_browser' %}",
            type: "get",
            data: {'user': now_user},
        });
    };

    function single_message_len() {
        $.ajax({
            url: "{% url 'send_single_message_len' %}",
            type: "get",
            data: {
                "self": now_user,
            },
            success: function (ret) {
                {#console.log(ret);#}
                clear_talk_with_me();

                for (key in ret) {
                    var user = key;
                    var num = ret[key] - talk_with_me_num[key];
                    if (num) {
                        $('#talk_with_me').append(`<div class="small_hand user_show">
                            <span class="talk_name">${user}</span>
                            <span class="have_message">${num}</span>
                        </div>`);
                    }
                }
            }
        });
    }

    setInterval(single_message_len, 3000);

    function single_message_send_task() {
        if (!single_message_num) {
            single_message_num = 0
        }
        $.ajax({
            url: "{% url 'send_single_message' %}",
            type: "get",
            data: {
                "self": now_user,
                "he": talk_username,
                "single_message_num": single_message_num,
            },
            success: function (ret) {
                single_message_num = ret.pop();

                // 和我聊天的消息重置
                talk_with_me_num[talk_username] = single_message_num;
                {#console.log(talk_with_me_num);#}
                {#console.log(ret);#}
                for (var i = 0; i < ret.length; i++) {
                    if (ret[i]["user"] === now_user) {
                        show_single_my_message(ret[i]["message"])
                    } else {
                        show_single_other_message(ret[i])
                    }
                }
                single_pull_down();
            }
        });
    }

    $('#single-person-send-btn').click(
        function () {
            var content = $('#single-person-input-content').val().trim();
            if (content !== "") {
                if (single_message_num) {
                    show_single_my_message(content);
                }
                single_pull_down();

                // 自己的消息自加
                talk_with_me_num[talk_username]++;

                $.ajax({
                    url: '{% url "accept_single_message" %}',
                    type: "post",
                    data: {
                        "self": now_user,
                        "who_talk_with": talk_username,
                        "content": content,
                    },
                    headers: {"X-CSRFToken": $.cookie('csrftoken')},
                    success: function (ret) {
                        {#console.log("11 ",ret);#}
                    }
                });
            }
            // 不管消息是否发送，点击完成后清空输入框消息
            clear_single_person_input();
        }
    );
</script>

</body>
</html>